<%@page import="com.mycity.dao.UserTab"%>
<%
    UserTab user = (UserTab) session.getAttribute("user_info");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Search Post by Location</title>
        
        <!-- Main style -->
        <link rel="stylesheet" href="/MyCityWeb/css/style.css" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
        </script>

        <script type="text/javascript">
            var myCenter = new google.maps.LatLng(41.00527, 28.977);
            var marker;
            var map;
            var curpos;
            var markers = [];
            var browserSupportFlag = new Boolean();
            function initialize()
            {
                var mapProp = {
                    center: myCenter,
                    zoom: 20,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);

                google.maps.event.addListener(map, 'click', function(event) {
                    deleteMarkers();
                    placeMarker(event.latLng);
                });
                if (navigator.geolocation) {
                    browserSupportFlag = true;
                    navigator.geolocation.getCurrentPosition(function(position) {
                        curpos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        map.setCenter(curpos);
                        placeMarker(curpos);
                    }, function() {
                        handleNoGeolocation(browserSupportFlag);
                    });
                }
                // Browser doesn't support Geolocation
                else {
                    browserSupportFlag = false;
                    handleNoGeolocation(browserSupportFlag);
                }

                function handleNoGeolocation(errorFlag) {
                    if (errorFlag == true) {
                        alert("Geolocation service failed.");
                        curpos = myCenter;
                    } else {
                        alert("Your browser doesn't support geolocation. We've placed you in Istanbul.");
                        curpos = myCenter;
                    }
                    placeMarker(curpos);
                    map.setCenter(curpos);
                }
            }
            function addMarkerListener(m, id) {
                google.maps.event.addListener(m, 'click', function() {
                    document.getElementById("id_lat").value = id;
                    $('#iplace').val(m.getTitle());
                    map.setCenter(m.getPosition());
                    map.setZoom(20);
                });

            }
            function placeMarker(location) {
                if (marker) {
                    marker.setPosition(location);
                } else {
                    marker = new google.maps.Marker({
                        position: location,
                        title: "Me",
                        map: map
                    });

                }
                map.setCenter(marker.getPosition());
                map.setZoom(17);
                getPlaces(location);
            }


            function getPlaces(locpos) {
                $.ajax({
                    dataType: "jsonp",
                    url: "https://api.instagram.com/v1/locations/search?lat=" + locpos.lat() + "&lng=" + locpos.lng() + "&client_id=bbe7c585542f41dd924f1c96e63bc591",
                    success: function(data) {
                        var index;
                        markers = [];
                        var size = Math.min(data.data.length, 12);

                        for (index = 0; index < size; ++index) {
                            m = new google.maps.Marker({
                                position: new google.maps.LatLng(data.data[index].latitude, data.data[index].longitude),
                                title: data.data[index].name,
                                map: map
                            });
                            addMarkerListener(m, data.data[index].id);
                            markers.push(m);
                        }
                    }
                });
            }

            function setAllMap(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }
            }

// Removes the markers from the map, but keeps them in the array.
            function clearMarkers() {
                setAllMap(null);
            }

// Shows any markers currently in the array.
            function showMarkers() {
                setAllMap(map);
            }

// Deletes all markers in the array by removing references to them.
            function deleteMarkers() {
                clearMarkers();
                markers = [];
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

    </head>

    <body class="direction-left">



        <div class='header'>

            <div class='menu' style='float: right; margin-right:10px; margin-left:1px;'>
                <% if (user != null) {%>
                <a href="/MyCityWeb/addPost.jsp"><img src="/MyCityWeb/img/newPost.png" title='NEW POST' alt='NEW POST' /></a>
                <a href="/MyCityWeb/profilePage.jsp"><img src="/MyCityWeb/img/profile.png" title='PROFILE PAGE' alt='PROFILE PAGE' /></a>
                <a href="/MyCityWeb/Search/recommend"><img src="/MyCityWeb/img/navigation.png" title='RECOMMENDED POSTS' alt='RECOMMENDED POSTS' /></a>
                <% }%>
                <a href="/MyCityWeb/searchPost.jsp"><img src="/MyCityWeb/img/search.png" title='SEARCH FOR A LOCATION' alt='SEARCH FOR A LOCATION' /></a>             
                <a href="/MyCityWeb/home.jsp"><img src="/MyCityWeb/img/home.png" title='HOME PAGE' alt='HOME PAGE' /></a>
            </div>
        </div>	

        <!-- LOGIN -->
        <div id="subscribe">
            <!-- SHOW THIS PART AS LOGIN PAGE (BEGIN) -->	
            <div id="content">

                <!-- PANEL -->
                <div class="panel">
                    <div id='map-canvas' style="height: 800px; width:800px;  margin-bottom:10px;">
                    </div>

                    <!-- LOGIN FORM (BEGIN) -->
                    <form id="subscribe-form" action="/MyCityWeb/Search/nearby" method="post">
                        <input type="text" class='answer' name='nplace'  id="iplace" placeholder="Select a place..."  readonly/><br/>  
                        <input type="submit" id="subscribe-button" value="SEARCH" />
                        <input type="text" name="loc_id" id="id_lat" style="display:none"/>
                    </form>
                    <!-- /LOGIN FORM (END) -->
                </div>
                <!-- /LOGIN -->

                <!-- SOCIAL -->
                <div class="social">



                    <a href="/MyCityWeb/home.jsp" target='blank'>
                        <img src="/MyCityWeb/img/home.png" title='HOME' alt="NAVIGATE">
                    </a>
                </div>
                <!-- /SOCIAL -->

                <!-- /POST SCRIPTUM -->
            </div>



        </div>

    </body>
</html>
